@extends('layouts.header')
@section('title','扫描二维码或RFID码')
@section('style')
    /*外层容器设置高*/
    #elec_table{
    position:relative;
    table-layout : fixed;
    }
    .table-body{
    overflow-y:auto;
    overflow-x:hidden;
    height:500px;
    }
    /*设置table-layout:fixed固定宽度，表头和表体需要对齐*/
    table{
    table-layout:fixed;
    }
    /*设置单元格的宽度，可能会出现内容长需要换行的情况 使用white-space:normal，每个单元格都是一样的宽度*/
    #elec_table td{
    width:20%;
    white-space:normal;
    }
@endsection
@section('content')
    <article class="page-container">
        <div>
            <span class="btn btn-primary radius" onclick="layer_show('选择受理批次','contract','','',true)">选择受理批次</span>
            受理批次：<span id="batchNum"></span><input name="contract_id" type="hidden" value="">
        </div>
        <div class="mt-10">
            <input id="scan-input" type="text" placeholder="扫码前请将此处点亮" class="input-text radius size-L" value="">
        </div>
        <div class="mt-10 text-r">
            <span class="btn btn-primary radius" id="sub">保存表格</span>
        </div>
        <div class="mt-10">
            <!-- 表头需要固定的地方  -->
            <div id="elec_table">
                <div class="table-head">
                    <table class="table theadstyle">
                        <thead>
                        <tr style="background: #e8e8e8;">
                            <th>扫码结果</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <!-- 表体需要显示滚动条的地方  -->
            <div class="table-body">
                <table class="table table-bordered" id="tb-body">

                </table>
            </div>
        </div>
    </article>
    <script>
        var tbData = {},   //定义上传数据对象
            tbNotData = {}; //定义不允许再次添加的数据
        $(function () {
            //去除平板或手机focus引起的呼出键盘
            $('#scan-input').attr('readonly',true).focus();
            setTimeout(function () {
                $('#scan-input').attr('readonly',false);
            }, 50)
        });
        //扫码
        $('#scan-input').keypress(function (event) {
            if (event.which == 13) {
                let contract_id = getContrctId(),input_val = $(this).val(), id = '', oData = {};
                $(this).val('');
                if(!contract_id){
                   return false;
                }
                if (!input_val) {
                    layer.msg('扫描数据不合法！', {time: 2000});
                    return false;
                }
                id = getUrlParam(input_val, 'id');
                oData.contract_id = contract_id;
                if (id) {
                    oData.id = id;
                    oData.k = getUrlParam(input_val, 'k');
                }
                else {
                    oData.code = input_val;
                }
                if ((tbNotData[input_val] != undefined && tbNotData[input_val])) {
                    layer.msg('数据已存在！');
                    return false;
                }

                ajax('post', '', oData, keyPressBak, 0);

                //扫码回调
                function keyPressBak(res) {
                    if (res.code !== 1) {
                        if(res.code === 2){
                            tbNotData[input_val] = 1;
                            tbNotData[res.data.id] = 1;
                        }
                        layer.msg(res.msg);
                        return false;
                    }
                    res = res.data;
                    if (!res) {
                        layer.msg('无效扫码！');
                        return false;
                    }
                    tbNotData[input_val] = 1;
                    //判断是否已添加或扫码
                    if ((tbNotData[res.id] != undefined && tbNotData[res.id])) {
                        layer.msg('数据已存在！');
                        return false;
                    }
                    tbData[res.id] = res.id; //要保存的ID
                    tbNotData[res.id] = res.id; //不允许再次添加的数据
                    // http://sbd.gz.gqjjc03.vip/viewRes?id=4951&k=QOYyzB
                    $('#tb-body').prepend('<tr class="center" id="tr-' + res.id + '">' +
                        '                    <td class="bar_code">' + res.bar_code + '</td>' +
                        '                    <td class="tool_name">' + res.tool_name + '</td>' +
                        '                    <td>' +
                        '                        <span class="btn btn-primary radius size-MINI" onclick="del(this,' + res.id + ')">删除</span>\n' +
                        '                    </td>' +
                        '                </tr>');
                }
            }
        });


        function del(obj, id) {
            tbData[id] = '';
            tbNotData[id] = '';
            $(obj).closest('tr').remove();
        }

        //保存表格
        $('#sub').on('click', function () {
            if (tbData === {}) {
                layer.msg('请先扫码进行录入！！');
                return false;
            }
            let oData = {
                batchNum: $.trim($('#batchNum').text()),
                sampleIds: tbData,
            };
            ajax('post', 'gaiyao', oData, subBak, 1);

            function subBak(res) {
                if (res != 1) {
                    layer.msg(res);
                    return false;
                }
                layer.msg('受理成功！');
                $('#tb-body').html('');
                tbData = tbNotData = {};
            }
        })
        function getContrctId(){
            let contract_id = $('input[name=contract_id]').val();
            if (contract_id === '') {
                layer.msg('请先指定批次！');
                return false;
            }
            return contract_id;
        }
    </script>
@endsection